import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { 
  Database, 
  Activity, 
  HardDrive, 
  Users, 
  MoreVertical,
  Play,
  Pause,
  Trash2
} from "lucide-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
import { useI18n } from "../lib/i18n/context";

interface DatabaseInstance {
  id: string;
  name: string;
  engine: string;
  version: string;
  status: 'running' | 'stopped' | 'pending' | 'maintenance';
  region: string;
  instanceType: string;
  storage: number;
  connections: number;
  cpu: number;
  memory: number;
  createdAt: string;
}

interface DatabaseCardProps {
  database: DatabaseInstance;
  onStart: (id: string) => void;
  onStop: (id: string) => void;
  onDelete: (id: string) => void;
  onViewDetails: (id: string) => void;
}

const statusColors = {
  running: 'bg-green-500',
  stopped: 'bg-red-500',
  pending: 'bg-yellow-500',
  maintenance: 'bg-blue-500'
};

export function DatabaseCard({ database, onStart, onStop, onDelete, onViewDetails }: DatabaseCardProps) {
  const { t } = useI18n();
  
  const statusLabels = {
    running: t.instances.status.running,
    stopped: t.instances.status.stopped,
    pending: t.instances.status.pending,
    maintenance: t.instances.status.maintenance
  };
  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <div className="flex items-center space-x-2">
          <Database className="h-5 w-5 text-blue-600" />
          <CardTitle className="text-lg">{database.name}</CardTitle>
        </div>
        <div className="flex items-center space-x-2">
          <Badge 
            variant="secondary" 
            className={`${statusColors[database.status]} text-white`}
          >
            {statusLabels[database.status]}
          </Badge>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onViewDetails(database.id)}>
                {t.instances.actions.viewDetails}
              </DropdownMenuItem>
              {database.status === 'stopped' ? (
                <DropdownMenuItem onClick={() => onStart(database.id)}>
                  <Play className="h-4 w-4 mr-2" />
                  {t.instances.actions.start}
                </DropdownMenuItem>
              ) : (
                <DropdownMenuItem onClick={() => onStop(database.id)}>
                  <Pause className="h-4 w-4 mr-2" />
                  {t.instances.actions.stop}
                </DropdownMenuItem>
              )}
              <DropdownMenuItem 
                onClick={() => onDelete(database.id)}
                className="text-red-600"
              >
                <Trash2 className="h-4 w-4 mr-2" />
                {t.instances.actions.delete}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <p className="text-muted-foreground">{t.instances.details.engine}</p>
            <p>{database.engine} {database.version}</p>
          </div>
          <div>
            <p className="text-muted-foreground">{t.instances.details.instanceType}</p>
            <p>{database.instanceType}</p>
          </div>
          <div>
            <p className="text-muted-foreground">{t.instances.details.region}</p>
            <p>{database.region}</p>
          </div>
          <div>
            <p className="text-muted-foreground">{t.instances.details.storage}</p>
            <p>{database.storage} GB</p>
          </div>
        </div>
        
        <div className="mt-4 grid grid-cols-3 gap-4">
          <div className="flex items-center space-x-2">
            <Activity className="h-4 w-4 text-green-600" />
            <div>
              <p className="text-sm text-muted-foreground">{t.instances.details.cpu}</p>
              <p className="text-sm">{database.cpu}%</p>
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <HardDrive className="h-4 w-4 text-blue-600" />
            <div>
              <p className="text-sm text-muted-foreground">{t.instances.details.memory}</p>
              <p className="text-sm">{database.memory}%</p>
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <Users className="h-4 w-4 text-purple-600" />
            <div>
              <p className="text-sm text-muted-foreground">{t.instances.details.connections}</p>
              <p className="text-sm">{database.connections}</p>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}